<template>
  <div class="row justify-center">
    <div :class="rowClasses(field)" v-for="(field, idx ) in fieldConfig" :key="idx" v-show="!field.hidden && field.type">
      <div v-if="field.type==='input'" v-show="!field.hidden">
        <fieldInput :field="field" :ref="field.ref" />
      </div>
      <div v-if="field.type==='datetime'" v-show="!field.hidden">
        <datetimeInput :field="field" :ref="field.ref" />
      </div>
      <div v-if="field.type==='select'" v-show="!field.hidden">
        <filterSelect :field="field" :ref="field.ref" />
      </div>
      <div v-if="field.type==='date'" v-show="!field.hidden">
        <dateInput :field="field" :ref="field.ref" />
      </div>
      <div v-if="field.type==='month'" v-show="!field.hidden">
        <monthInput :field="field" :ref="field.ref" />
      </div>
      <div v-if="field.type==='year'" v-show="!field.hidden">
        <yearInput :field="field" :ref="field.ref" />
      </div>
      <div v-if="field.type==='toggleSelect'" v-show="!field.hidden">
        <toggleSelect :field="field" :ref="field.ref" />
      </div>
      <div v-if="field.type==='checkbox'" v-show="!field.hidden">
        <fieldCheckbox :field="field" :ref="field.ref" />
      </div>
      <div v-if="field.type==='toggle'" v-show="!field.hidden">
        <fieldToggle :field="field" :ref="field.ref" />
      </div>
      <div v-if="field.type==='radio'" v-show="!field.hidden">
        <fieldRadio :field="field" :ref="field.ref" />
      </div>
      <div v-if="field.type==='autocomplete'" v-show="!field.hidden">
        <autocomplete :field="field" :ref="field.ref" />
      </div>
      <div v-if="field.type==='richedit'" v-show="!field.hidden">
        <fieldRichedit :field="field" :ref="field.ref" />
      </div>
      <div v-if="field.type==='image'" v-show="!field.hidden">
        <fieldImage :field="field" :ref="field.ref" />
      </div>
      <div v-if="field.type==='table'" v-show="!field.hidden">
        <detailTable :field="field" :ref="field.ref">
          <template v-for="col in field.columns" v-slot:[`body-${col.name}`]="{ props }">
            <slot :props="props" :name="field.ref + '-body-' + col.name" />
          </template>
        </detailTable>
      </div>
      <div v-if="field.type==='separator'">
        <fieldSep :field="field" :ref="field.ref" />
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import filterSelect from 'src/components/FilterSelect.vue';
import dateInput from 'src/components/DateInput.vue';
import datetimeInput from 'src/components/DatetimeInput.vue';
import monthInput from 'src/components/MonthInput.vue';
import yearInput from 'src/components/YearInput.vue';
import toggleSelect from 'src/components/ToggleSelect.vue';
import detailTable from 'src/components/DetailTable.vue';
import fieldInput from 'src/components/FieldInput.vue';
import fieldCheckbox from 'src/components/FieldCheckbox.vue';
import fieldRadio from 'src/components/FieldRadio.vue';
import fieldSep from 'src/components/FieldSeparator.vue';
import fieldToggle from 'src/components/FieldToggle.vue';
import autocomplete from 'src/components/Autocomplete.vue';
import fieldRichedit from 'src/components/FieldRichedit.vue';
import fieldImage from 'src/components/FieldImage.vue';

export default defineComponent({
  name: 'dialogInput',
  components: {
    filterSelect,
    dateInput,
    datetimeInput,
    monthInput,
    yearInput,
    toggleSelect,
    detailTable,
    fieldInput,
    fieldCheckbox,
    fieldRadio,
    fieldSep,
    fieldToggle,
    autocomplete,
    fieldRichedit,
    fieldImage
  },
  props: {
    fieldlist: {
      type: Object,
      default: () => {}
    },
    column: { // 列数
      type: Number,
      default: 1
    }
  },
  emits: ['image_done'],
  data () {
    const self = this;
    return {

    };
  },
  methods: {
    rowClasses (field) {
      if (field.class) {
        return field.class; // 返回自定义class
      }

      // 计算宽度
      let width = 12;
      if (!field.fullwidth && this.column > 1 && this.column <= 12) {
        width = 12 / this.column;
      }
      let defaultClass = `col-${width} q-mb-sm`;
      if (this.column > 1) {
        defaultClass += ' q-px-sm';
      }
      return defaultClass;
    },
    getFormData () { // 提取表单数据
      return new Promise((resolve, reject) => {
        const formData = {};
        const asyncData = [];
        for (const key in this.fieldConfig) {
          if (this.fieldConfig[key].type === 'select' && typeof this.fieldConfig[key].value === 'object' && this.fieldConfig[key].value) {
            formData[key] = this.fieldConfig[key].value.value;
          } else if (['image', 'attach'].includes(this.fieldConfig[key].type)) {
            const component = this.$refs[this.fieldConfig[key].ref];
            if (Object.prototype.toString.call(component) === '[object Array]') {
              component.forEach(com => {
                asyncData.push(com.submit());
              });
            } else {
              asyncData.push(component.submit());
            }
          } else {
            formData[key] = this.fieldConfig[key].value;
          }
        }
        // 对于图片及附件，Promise.all()等待返回结果
        if (asyncData.length > 0) {
          Promise.all(asyncData).then(res => {
            res.forEach(({ name, value }) => {
              formData[name] = value;
            });
            resolve(formData);
          });
        } else {
          resolve(formData);
        }
      });
    }
  },
  computed: {
    fieldConfig () {
      const fields = {};
      Object.keys(this.fieldlist).forEach(key => {
        if (!this.fieldlist[key].hide) {
          fields[key] = this.fieldlist[key];
          fields[key].name = key;
          if (!fields[key].ref) {
            fields[key].ref = key;
          }
        }
      });
      return fields;
    }
  }
});
</script>
